<template>
  <div class="section-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="first">
        <div style="margin-top: 15px;">
          <div class="clearfix">
            <el-button @click="ask" class="btn btn-default pull-right" type="primary">
              我要提问
            </el-button>
          </div>
        </div>

        <div class="question-list list">
          <ul>
            <li class="question-wrap list-item" v-for="(item, index) in questions" :key="index">
              <div class="user-face fl">
                <img :src="avator" alt=""/>
              </div>
              <div class="con">
                <div class="user-info">
                  <span class="user-name">{{ item.author }}</span>
                </div>
                <p class="desc">{{ item.topic }}</p>
                <div class="code-container" v-html="item.content">
                </div>
                <div class="info">
                  <span class="time">{{ item.createdAt }}</span>
                </div>
              </div>
            </li>
          </ul>
          <div v-if="isLoaded && questions.length==0" class="no-more-reply">
            还没有人提问哦！快来抢沙发吧！
          </div>
          <div v-show="questions.length >= 1" class="pagination-container">
            <el-pagination
              :current-page="currentPage"
              @current-change="handleCurrentChange"
              background
              :page-size="10"
              :pager-count="pagerCount"
              layout="prev, pager, next"
              :total="totalPage">
            </el-pagination>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <question-box v-if="show_editor == 1" @cancel="cancelSubmit" @submitted="submitQuestion">
    </question-box>
  </div>
</template>
<script>
  import { mapGetters, mapMutations, mapActions } from 'vuex'
  import 'highlight.js/styles/atom-one-dark.css'
  import QuestionBox from "pages/question-box"
  
  export default {
    data() {
      return {
        isLogin: localStorage.getItem('user_info') ? true : false,
        activeName: 'first',
        currentPage: 1,
        pagerCount: 7,
        totalPage: 7,
        questions: [],
        avator: 'http://avatar.wpn.itlukai.com/panda.jpg',
        isLoaded: false,
      };
    },
    computed: {
      ...mapGetters([
          'show_editor',
        ])
    },
    components: {
      QuestionBox
    },
    methods: {
      ...mapMutations({
        showEditor: 'SHOW_EDITOR',
        showLogin: 'SHOW_LOGIN',
        askQuestion: 'ASK_QUESTION',
      }),
      ...mapActions({
        postQuestion: 'postQuestion',
        getQuestions: 'getQuestions'
      }),
      renderQuestion() {
        let self = this
        self.getQuestions({
          page: self.currentPage
        })
        .then((res) => {
          console.log(res)
          self.isLoaded = true
          let { code, data, count } = res.data
          if (code == 0) {
            self.questions = data
            self.totalPage = count
          }
        })
      },
      cancelSubmit() {
        this.showEditor(0)
      },
      submitQuestion(topic, content) {
        let self = this
        console.log(self.$route)
        self.postQuestion({
          topic: topic,
          content: content
        })
        .then((res) => {
          console.log(res)
          self.isLoaded = true
          let { code, msg } = res.data
          if (code == 0) {
            self.renderQuestion()
            self.showEditor(0)
            self.topic = ''
          } else {
            self.showLogin(1)
          }

        })
      },
      handleCurrentChange(page) {
        this.currentPage = page
        this.renderQuestion()
      },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      ask() {
        if (this.isLogin) {
          this.showEditor(1)
        }
        else {
          this.showLogin(1)
        }
      },
    },
    created () {
      if (document.documentElement.clientWidth < 600) {
        this.pagerCount = 5
      }
      this.renderQuestion()
    }
  };
</script>

<style lang="less" @scoped>
  .question-list {
    padding-top: 20px;
    .list-item {
      text-align: left;
      .user-face {
        margin: 24px 0 0 5px;
        position: relative;
        img {
          width: 48px;
          height: 48px;
          border-radius: 50%;
        }
      }
      .con {
        position: relative;
        margin-left: 85px;
        padding: 22px 0 14px;
        .user {
          font-size: 12px;
          font-weight: 700;
          line-height: 18px;
          padding-bottom: 4px;
          display: block;
          word-wrap: break-word;
          color: #6d757a;
        }
        .desc {
          position: relative;
          line-height: 20px;
          padding: 2px 0;
          font-size: 14px;
          text-shadow: none;
          overflow: hidden;
          word-wrap: break-word;
          word-break: break-word;
        }
        .code-container {
          .codetool {
            position: relative;
            &-inner {
              white-space: normal;
              position: absolute;
              top: -10px;
              right: 0;
              z-index: 1;
              height: 24px;
              background-color: rgba(218, 198, 59, 0.9);
              padding: 0 5px;
              .tool-icon {
                cursor: pointer;
                display: block;
                float: left;
                color: #fff;
                width: 16px;
                height: 16px;
                line-height: 1;
                font-size: 16px;
                margin: 4px 5px;
                opacity: .7;
                &:hover {
                  opacity: 1;
                }
              }
            }
          }
        }
        .info {
          color: #99a2aa;
          line-height: 26px;
          font-size: 12px;
        }
      }
    }
    .pagination-container {
      margin-top: 30px;
    }
    .no-more-reply {
      color: #99a2aa;
      text-align: center;
      padding: 30px 0;
      font-size: 12px;
    }
  }
</style>